<template>
  <section class="appear-wrapper">
    <div
      class="item"
      v-if="data.length"
      v-for="(i, index) in data"
      :class="[index === 0 ? 'left' : 'right']"
    >
      <div class="title">{{i.label}}<slot :name="index === 0 ? 'left' : 'right'"></slot></div>
      <div v-if="!i.type" class="content">
        <template v-if="i.hasOwnProperty('value')">
          <span v-if="i.value">{{i.value}}</span>
          <span v-else class="none-value">-</span>
          {{i.value && i.tips}}
        </template>
      </div>
      <template v-if="i.type === 'editor'">
        <!-- <div v-if="i.type === 'editor' && i.value" class="editor-wrapper" v-html="i.value"></div> -->
        <iframe v-if="i.type === 'editor' && i.value && editorStatus"
          @load="changeFrameHeight"
          :id="id"
          :data="i.value"
          flag="false"
          class="nb-iframe"
          src="/static/iframe/index.html"
          height="100%"
          width="100%"
          frameborder="0"
          ></iframe>
        <div v-else style="line-height: 150%; font-size: 14px;">-</div>
      </template>
      <template v-if="i.type === 'editor2'">
         <div v-if="i.type === 'editor2' && i.value" class="editor-wrapper" v-html="i.value"></div>
      </template>
      <!--图片可点击-->
      <div v-if="i.type === 'image'" class="img">
        <a v-if="i.value" :href="i.value" target="_blank"><img :src="i.value + (i.param || '')"/></a>
        <div v-else="i.value" style="line-height: 150%; font-size: 14px;">-</div>
      </div>
       <!--查看附件-->
      <div v-if="i.type === 'attach'" class="content">
        <a :href="i.value" target="_blank" v-if="i.value">{{i.name}}</a>
        <template v-else="i.value">{{'-'}}</template>
      </div>
    </div>
  </section>
</template>

<script>
  /**
   * 支持显示的类型
   * 默认 文本
   * editor  富文本
   * image   图片 可点击查看
   * attach  附件
   * 标题 可支持slot传入 name分别为  left  right
   */
  export default {
    data () {
      return {
        editorStatus: true
      }
    },
    props: {
      item: {
        type: Array,
        default: () => {
          return []
        }
      },
      type: String,
      editor: Boolean,
      id: {
        type: String,
        default: 'nb-iframe'
      }
    },
    watch: {
      item: {
        deep: true,
        handler (data) {
          this.editorStatus = false
          setTimeout(() => {
            this.editorStatus = true
          }, 1)
        }
      }
    },
    computed: {
      data () {
        return this.item
      }
    },
    methods: {
      rightAdd () {
        this.$emit('rightAdd')
      },
      changeFrameHeight () {
        let _dom = document.getElementsByClassName('nb-iframe')
        for (let i = 0; i < _dom.length; i++) {
          let item = _dom[i]
          item.height = 0
          let _ifm = item
          _ifm.height = item.contentWindow.document.body.scrollHeight
        }
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.appear-wrapper{
  display: flex;
  margin-bottom: 24px;
  .item{
    flex: 1;
    width: 100%;
    .title{
      font-size: 14px;
      color: #999;
      padding-bottom: 8px;
    }
    .content {
      font-size: 14px;
      color: #333;
      line-height: 140%;
    }
    .editor-wrapper{
      line-height: 150%;
      font-size: 14px;
      img{
        width: 100%;
      }
    }
    .img{
      padding: 0 20px 0 0 ;
      box-sizing: border-box;
      img{
        width: 90%;
      }
    }
    .none-value{
      color: #999;
    }
  }
  .left{
    padding-right: 10px;
  }
  .right{
    padding-left: 10px;
  }
}
</style>
